<script>
import { apiSchoolWorkSave, apiScoreDetail } from '@/api/myClass/jobList';
import * as echarts from 'echarts'

export default {
  props: {
    workId: {
      type: [Number, String],
      default: ''
    }
  },
  data() {
    return {
      currentHtml: ''
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      apiScoreDetail(this.$props.workId).then(res => {
        this.currentHtml = res.data['studentTestPaperContent']
        setTimeout(() => {
          this.handleResize()
        }, 1000)
      });
    },
    handleBeforeClick(x, y, width, height, event) {
      // console.log(x, y, width, height);
      const rect = {
        left: width - 36,
        right: width - 8,
        top: 8,
        bottom: 36
      }
      if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
        event()
      }
      // console.log(rect, x, y);
    },
    handleAfterClick(x, y, width, height, event) {
      const rect = {
        left: width - 72,
        right: width - 44,
        top: 8,
        bottom: 36
      }
      if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
        event()
      }
    },
    handleResize() {
      const dom = document.querySelector('#job-score')
      dom.querySelectorAll('div.group-wrapper').forEach(group => {
        group.style['display'] = 'block';
      })
      dom.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
        checkbox.disabled = true
        const parent = checkbox.parentNode
        const lastChecked = checkbox.dataset['lastChecked']
        checkbox.checked = lastChecked === 'true'
        parent.classList.add('score-bound')
        parent.onclick = (e) => {
          this.handleAfterClick(e.offsetX, e.offsetY, parent.clientWidth, parent.clientHeight, () => {
            parent.classList.add('scored')
            parent.dataset['ans'] = false
          })
          this.handleBeforeClick(e.offsetX, e.offsetY, parent.clientWidth, parent.clientHeight, () => {
            parent.classList.add('scored')
            parent.dataset['ans'] = true
          })
        }
        if (checkbox.dataset['isTrue'] === 'true') {
          const nextLabel = checkbox.nextElementSibling
          nextLabel.innerHTML = nextLabel.innerHTML + ' - [正确答案]'
        }
      })
      dom.querySelectorAll('select').forEach(select => {
        select.disabled = true
        const parent = select.parentNode
        parent.classList.add('score-bound')
        select.selectedIndex = parseInt(select.dataset['lastSelected'])
        parent.onclick = (e) => {
          this.handleAfterClick(e.offsetX, e.offsetY, parent.clientWidth, parent.clientHeight, () => {
            parent.classList.add('scored')
            parent.dataset['ans'] = false
          })
          this.handleBeforeClick(e.offsetX, e.offsetY, parent.clientWidth, parent.clientHeight, () => {
            parent.classList.add('scored')
            parent.dataset['ans'] = true
          })
        }
        select.querySelectorAll('option').forEach(option => {
          if (option.dataset['isTrue'] === 'true') {
            const label = document.createElement('span')
            label.innerHTML = '正确答案：' + option.value
            select.parentNode.appendChild(label)
          }
        })
      })
      dom.querySelectorAll('p.custom-answer').forEach(answer => {
        const trueAnswer = answer.dataset['trueAnswer']
        const div = document.createElement('div')
        const parent = answer
        parent.classList.add('score-bound')
        parent.onclick = (e) => {
          console.log(e);
          this.handleAfterClick(e.offsetX, e.offsetY, parent.clientWidth, parent.clientHeight, () => {
            parent.classList.add('scored')
            parent.dataset['ans'] = false
          })
          this.handleBeforeClick(e.offsetX, e.offsetY, parent.clientWidth, parent.clientHeight, () => {
            parent.classList.add('scored')
            parent.dataset['ans'] = true
          })
        }
        div.style['marginTop'] = '12px'
        div.innerHTML = '正确答案：' + trueAnswer
        answer.parentNode.appendChild(div)
      })
      dom.querySelectorAll('div.work-collection-chart').forEach(chartDiv => {
        const chartInstance = echarts.init(chartDiv)
        const option = JSON.parse(chartDiv.dataset['lastOption'])
        chartInstance.setOption(option)
      })
      dom.querySelectorAll('div.chart-div').forEach(chartDiv => {
        const chartInstance = echarts.init(chartDiv)
        const option = JSON.parse(chartDiv.dataset['lastOption'])
        chartInstance.setOption(option)
      })
    },
    $submit() {
      return new Promise((resolve, reject) => {
        const html = document.querySelector('#job-score').innerHTML
        apiSchoolWorkSave(this.$props.workId, html).then(() => {
          resolve()
        }).catch(reject)
      })
    }
  }
};
</script>

<template>
  <div id="job-score" class="job-score-container" v-html="currentHtml" />
</template>

<style lang="scss">
.socket-panel {
  position: absolute;
  right: 12px;
  top: 12px;
}

.tabs-container {
  position: absolute;
  height: 60px;
  width: 100%;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;

  .tabs-item {
    position: relative;
    width: calc(100% / var(--length));
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;

    &.--active {
      background-color: #e81b46;
      color: #fff;
    }
  }
}

.job-score-container {
  height: 100%;
  padding: 12px 12px 0 12px;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid #C6C6C6;
  width: 100%;
  outline: none;
  box-sizing: border-box;

  .group-wrapper {
    display: none;
    overflow-y: auto;
  }

  .document-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
  }

  .document-author {
    font-size: 15px;
    color: #666666;
    margin-bottom: 12px;
  }

  .document-category {
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-bottom: 12px;

    .document-category-item {
      color: #888888;
    }

    .document-category-sp {
      margin: 0 4px;

      &::before {
        content: '>';
      }
    }
  }

  p {
    //border-left: 8px solid #6d6d6d;
    padding: 8px 0 8px 4px;

    .wordDescription {
      color: #fff; /* 文字颜色 */
      text-shadow: 0 0 5px #ff0000,
      0 0 10px #ff0000,
      0 0 20px #ff0000;
      user-select: none;
      cursor: pointer;
    }

    &.head1 {
      font-size: 32px;
      font-weight: 700;
    }

    &.head2 {
      font-size: 24px;
      font-weight: 700;
    }

    &.head3 {
      font-size: 18px;
      font-weight: 700;
    }

    &.head4 {
      font-weight: 700;
    }

    &.head5 {
      font-size: 13px;
      font-weight: 700;
    }

    &.head6 {
      font-size: 12px;
      font-weight: 700;
    }

    &.title {
      font-size: 21px;
      text-align: center;
    }

    &.sub-title {
      font-size: 21px;
      font-weight: 600;
      text-align: center;
    }

    &.normal {
      font-size: 14px;
      font-weight: 600;
      font-style: italic;
    }

    &.custom-list {
      font-size: 14px;
      height: 32px;
      padding: 0;
      border-left: 12px solid #B4D8E2;
    }

    &.custom-tips {
      background-color: rgba(85, 170, 255, 0.5);
      border: 3px solid #55aaff;
      padding: 8px;
      border-radius: 6px;
      margin: 8px 0;
    }

    &.custom-warning {
      padding: 8px;
      border-radius: 6px;
      background-color: #F49193;
      border: 3px solid #C74D4F;
      margin: 8px 0;
    }

    &.custom-answer {
      padding: 8px;
      border-radius: 6px;
      background-color: #EEEEED;
      margin: 8px 0;
    }
  }

  table.custom-material {
    width: 80%;
    border-left: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;

    thead {
      background-color: #ffffff;
      font-size: 14px;

      tr {
        th {
          padding: 12px;
          border-right: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
        }
      }
    }

    tbody {
      background-color: #ffffff;

      tr {
        td {
          padding: 12px;
          border-right: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
        }
      }
    }
  }

  table.custom-device {
    border-left: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;

    thead {
      background-color: #ffffff;
      font-size: 14px;

      tr {
        th {
          padding: 12px;
          border-right: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
        }
      }
    }

    tbody {
      background-color: #ffffff;

      tr {
        td {
          padding: 12px;
          border-right: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
        }
      }
    }
  }

  .measure-table {
    width: 100%;
    border-left: 1px solid #dcdfe6;
    border-top: 1px solid #dcdfe6;

    thead {
      background-color: #FFFFFF;
      font-size: 14px;

      tr {
        th {
          padding: 12px 0;
          border-right: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
          background-color: #dcdfe6;
          color: #333;
        }
      }
    }

    tbody {
      background-color: #FFFFFF;

      tr {
        td {
          padding: 12px;
          border-right: 1px solid #dcdfe6;
          border-bottom: 1px solid #dcdfe6;
        }
      }
    }
  }

  .work-collection-table {
    table {
      width: 100%;
      border-left: 1px solid #dcdfe6;
      border-top: 1px solid #dcdfe6;

      thead {
        background-color: #FFFFFF;
        font-size: 14px;

        tr {
          th {
            padding: 12px 0;
            border-right: 1px solid #dcdfe6;
            border-bottom: 1px solid #dcdfe6;
            background-color: #dcdfe6;
            color: #333;
          }
        }
      }

      tbody {
        background-color: #FFFFFF;

        tr {
          td {
            padding: 12px;
            border-right: 1px solid #dcdfe6;
            border-bottom: 1px solid #dcdfe6;
          }
        }
      }
    }
  }

  .chart-container {
    background-size: 100% 100%;
  }

  .op-box {
    background-color: #6a6a6a;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .op-bar-btn {
      width: 60px;
      height: 60px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-size: 100% 100%;
      cursor: pointer;
      transform-origin: 50% 50%;
    }

    .op-bar-label {
      color: #fff;
      position: absolute;
      font-size: 11px;
    }

    .op-bar-label1 {
      right: 20px;
      top: 20px;
    }

    .op-bar-label2 {
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }

    .op-bar-label3 {
      top: 70%;
      right: 0;
    }

    .op-bar-label4 {
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
    }

    .op-bar-label5 {
      top: 70%;
      left: 8px;
    }

    .op-bar-label6 {
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }

    .op-bar-label7 {
      top: 20px;
      left: 12px;
    }

    .op-bar-label8 {
      left: 50%;
      top: 8px;
      transform: translateX(-50%);
    }

    .op-bar2-label1 {
      right: 20px;
      top: 20px;
    }

    .op-bar2-label2 {
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
    }

    .op-bar2-label3 {
      top: 70%;
      right: 20px;
    }

    .op-bar2-label4 {
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
    }

    .op-bar2-label5 {
      top: 70%;
      left: 12px;
    }

    .op-bar2-label6 {
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }

    .op-bar2-label7 {
      top: 20px;
      left: 12px;
    }

    .op-bar1,
    .op-bar2,
    .op-bar3 {
      height: 120px;
      width: 120px;
      position: relative;
    }
  }

  .single-bound {
    width: 240px;
    height: 256px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #eee;
    position: relative;
    //background-image: url('@/assets/images/preview-device.jpg');
    background-size: 100% 120px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    border-radius: 8px 8px 0 0;
    border-top: 12px solid #504d4d;
    border-left: 12px solid #504d4d;
    border-right: 12px solid #504d4d;
    z-index: 10;

    .single-bound--title {
      position: absolute;
      left: 34px;
      top: 10px;
      font-size: 16px;
      color: #333333;
      user-select: none;
      z-index: 200;
    }

    .single-bound--unit {
      position: absolute;
      right: 44px;
      bottom: 160px;
      font-size: 16px;
      font-weight: 600;
      color: #333333;
    }

    .single-bound--btn-bound {
      position: absolute;
      bottom: 0;
      z-index: 100;
      width: 100%;
      height: 136px;
      background-repeat: no-repeat;
      background-position: center center;
      background-color: #504d4d;

      .single-bound--btn {
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-size: 100% 100%;
        cursor: pointer;
        transform-origin: 50% 50%;
      }

      .single-bound--control-label {
        position: absolute;
        color: #f0f0f0;

        &.label1 {
          left: 144px;
          top: 12px;
        }

        &.label2 {
          left: 166px;
          top: 50%;
        }

        &.label3 {
          bottom: 0;
          left: 53%;
        }

        &.label4 {
          left: 28%;
          bottom: 10%;
        }

        &.label5 {
          left: 20%;
          top: 32%;
        }

        &.label6 {
          left: 38%;
          top: 3%;
        }
      }
    }

    .single-bound--value {
      position: absolute;
      font-size: 30px;
      font-weight: 600;
      bottom: calc(22px + 136px);
      left: 40px;
      color: #333333;
    }
  }

  p > select {
    width: 250px;
    padding: 10px 35px 10px 15px;
    font-size: 16px;
    color: #333;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: all 0.2s ease;

    &:hover {
      border-color: #bbb;
    }

    &:focus {
      outline: none;
      border-color: #4a90e2;
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    }

    option {
      padding: 8px;
    }
  }

  p label {
    display: flex;
    align-items: center;
    width: 250px;
    height: 42px; /* 与select高度匹配 */
    cursor: pointer;
    position: relative;
    font-size: 16px;
    color: #333;
    padding-left: 35px;

    &:before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      background: white;
      border: 1px solid #ddd;
      border-radius: 4px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    &:hover:before {
      border-color: #bbb;
    }
  }

  p input[type=checkbox] {
    position: absolute;
    opacity: 0;
    height: 0;
    width: 0;

    &:checked + label:before {
      background-color: #4a90e2;
      border-color: #4a90e2;
    }

    &:checked + label:after {
      content: "";
      position: absolute;
      left: 7px;
      top: 50%;
      transform: translateY(-50%) rotate(45deg);
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 2px 2px 0;
    }

    &:focus + label:before {
      border-color: #4a90e2;
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
    }

    &:disabled + label {
      color: #aaa;
      cursor: not-allowed;
    }

    &:disabled + label:before {
      background: #f0f0f0;
      border-color: #ddd;
    }
  }

  p.custom-answer {
    width: 100%;
    min-height: 120px;
    padding: 12px 15px;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    outline: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow-y: auto;

    &:focus {
      border-color: #4a90e2;
      box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
    }

    &:empty:before {
      content: attr(placeholder);
      color: #aaa;
      pointer-events: none;
      display: block;
    }
  }

  p.score-bound {
    position: relative;

    &::before {
      content: "√";
      width: 28px;
      height: 28px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      cursor: pointer;
      position: absolute;
      right: 8px;
      top: 8px;
      background-color: #3b75e9;
      color: #ffffff;
      font-weight: 600;
    }

    &::after {
      content: "×";
      width: 28px;
      height: 28px;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      user-select: none;
      cursor: pointer;
      position: absolute;
      right: 44px;
      top: 8px;
      background-color: #ff0101;
      color: #fff;
      font-weight: 600;
    }

    &.scored {
      &::before {
        display: none!important;
      }

      &::after {
        display: none!important;
      }
    }
  }
}
</style>
